<template>
  <div class="home">
    <avue-form :option="option"></avue-form>
    <el-divider></el-divider>
    <avue-map v-model="text"></avue-map>
    <el-divider></el-divider>
    <el-tooltip
      class="item"
      effect="light"
      :content="form[2]"
      placement="top-start"
    >
      <div class="map">
        <avue-input-map
          :params="params"
          placeholder="请选择地图"
          v-model="form"
        ></avue-input-map>
        <i class="el-icon-map-location iconfont"></i>
      </div>
    </el-tooltip>
    <el-divider></el-divider>
    <div class="a-map">
      <avue-input-map
        :params="params"
        placeholder="请选择地图"
        v-model="form"
      ></avue-input-map>
      <i class="el-icon-map-location iconfont"></i>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        column: [
          {
            label: "坐标",
            prop: "map",
            type: "map",
            value: [
              113.10235504165291,
              41.03624227495205,
              "内蒙古自治区乌兰察布市集宁区新体路街道顺达源广告传媒",
            ],
          },
        ],
      },
      text: {
        formattedAddress: "天安门广场",
        longitude: 116.39775500000002,
        latitude: 39.903179,
      },

      //高德初始化参数
      params: {
        zoom: 10,
        // zoomEnable: false, // 是否可缩放
        // dragEnable: false, // 是否可拖动
      },
      form: [
        113.10235504165291,
        41.03624227495205,
        "内蒙古自治区乌兰察布市集宁区新体路街道顺达源广告传媒",
      ],
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.map {
  position: relative;
  width: 150px;
  ::v-deep .el-textarea__inner {
    border: none;
    max-height: 20px;
    padding: 0 20px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
    -webkit-box-orient: vertical;
  }
  .iconfont {
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px;
    background: #fff;
    color: #409eff;
  }
}
.a-map {
  position: relative;
  .iconfont {
    position: absolute;
    top: 1px;
    right: 2px;
    padding: 7px;
    background: #fff;
    color: #409eff;
  }
}
</style>